<template>
	<div class="container">
		<el-row style="margin-bottom: 15px;">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
				<el-breadcrumb-item>帮买取快递废品回收</el-breadcrumb-item>
				<el-breadcrumb-item>驿站管理</el-breadcrumb-item>
			</el-breadcrumb>
		</el-row>
		<el-row>
			<el-form inline :model="formInline" style="height: 60px;">

				<el-form-item label="驿站名称">
					<el-input v-model="formInline.courierStationName" clearable @clear='queryInfo'></el-input>
				</el-form-item>

				<el-form-item label="小区名称">
					<el-input v-model="formInline.communityName" clearable @clear='queryInfo'></el-input>
				</el-form-item>

				<el-form-item label="添加时间">
					<el-date-picker v-model="date" type="daterange" range-separator="至" start-placeholder="开始日期"
						end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" clearable @clear='queryInfo'>
					</el-date-picker>
				</el-form-item>

				<el-form-item>
					<el-button type="primary" @click="queryInfo">查询</el-button>
				</el-form-item>

			</el-form>

		</el-row>

		<el-row style="margin-bottom:10px;">
			<el-button type="primary" size="medium" @click="addCourier">添加驿站</el-button>

			<el-dialog :title="title" :visible.sync="dialogFormVisible">
				<el-form :model="form">

					<el-form-item label="驿站名称" :label-width="formLabelWidth">
						<el-input v-model="form.courierStationName" autocomplete="off"></el-input>
					</el-form-item>

					<el-form-item label="所属地区" :label-width="formLabelWidth">
						<el-cascader v-model="address" :options="citydata" :props="{ expandTrigger: 'hover' }">
						</el-cascader>
					</el-form-item>

					<el-form-item label="" :label-width="formLabelWidth">
						<el-input v-model="form.courierStationAddress" autocomplete="off"
							placeholder="请填写详细地址"></el-input>
					</el-form-item>

					<el-form-item label="所属小区" :label-width="formLabelWidth">
						<el-select v-model="form.courierStationCommunityId" placeholder="请选择所属小区" style="width: 100%;">
							<el-option v-for="item in options" :key="item.communityId"
								:label="item.communityName+'('+item.communityAddress+')'" :value="item.communityId">
							</el-option>
						</el-select>

					</el-form-item>

				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="cancle">取 消</el-button>
					<el-button type="primary" @click="addOrUpdate()">确 定</el-button>
				</div>

			</el-dialog>

		</el-row>

		<!--  -->
		<el-row>
			<el-table border :data='list' style="width: 100%;margin-bottom: 20px;" :header-cell-style='headerCellStyle'>
				<el-table-column prop="courierStationId" label="ID"></el-table-column>
				<el-table-column prop="courierStationName" label="驿站名字"></el-table-column>
				<!-- <el-table-column prop="shopPhone" label="驿站照片"></el-table-column> -->
				<el-table-column prop="courierStationAddress" label="驿站地址"></el-table-column>
				<el-table-column prop="courierStationCommunityName" label="所在小区"></el-table-column>
				<el-table-column prop="courierStationOrderCount" label="订单总数"></el-table-column>
				<el-table-column prop="addTime" label="添加时间"></el-table-column>
				<el-table-column label="状态">
					<template slot-scope="scope">

						<el-tag
							:type="scope.row.courierStationStatus==1?'success':'danger'">{{scope.row.courierStationStatus==1?'已上架':'已下架'}}
						</el-tag>

					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-link type="primary" :underline='false'
							@click="state(scope.row)">立即{{scope.row.courierStationStatus==1?'下架':'上架'}}</el-link><br />
						<el-link type="primary" :underline='false' @click="modify(scope.row)">编辑</el-link>
					</template>
				</el-table-column>
			</el-table>
		</el-row>

		<el-row>

			<el-pagination :current-page=" formInline.pageNum" :page-sizes="[5, 10, 15, 20]"
				:page-size="formInline.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
				@size-change="handleSizeChange" @current-change="handleCurrentChange">
			</el-pagination>

		</el-row>


	</div>
</template>

<script>
	import citydata from '@/assets/citydata.js'
	export default {
		data() {
			return {
				form: {
					courierStationAddress: "",
					courierStationCity: "",
					courierStationCommunityId: "",
					courierStationDistrict: "",
					courierStationImage: "",
					courierStationName: "",
					courierStationProvince: ""
				},
				dialogFormVisible: false,
				title: '添加驿站',
				address: [],
				resMessage: '添加',
				formLabelWidth: '120px',
				citydata: citydata,

				options: [],





				formInline: {
					startTime: '',
					endTime: '',
					pageNum: 1,
					pageSize: 5,
					courierStationName: '',
					communityName: '',
					courierStationStatus: '',
					courierStationId: ''

				},
				total: 10,
				list: [],
				date: '',
				headerCellStyle: {
					'text-align': 'center',
					'line-height': '30px',
					backgroundColor: '#409EFF',
					color: '#fff'
				},

			}
		},
		methods: {
			state(rowDate) {
				rowDate.courierStationStatus = rowDate.courierStationStatus == 1 ? 0 : 1
				this.$http.post('/courierStation/modifyCourierStation', {
						courierStationId: rowDate.courierStationId,
						courierStationStatus: rowDate.courierStationStatus
					})
					.then(res => {
						if (res.status == 200) {
							this.$message({
								type: 'success',
								showClose: true,
								message: '修改成功',
							})
							this.queryInfo()
						} else {
							this.$message({
								type: 'error',
								showClose: true,
								message: '修改失败'
							})
						}


					})
			},


			modify(rowDate) {
				this.title = '编辑驿站',
					this.resMessage = '修改'
				this.form = rowDate
				this.address = [this.form.courierProvince, this.form.courierCity, this.form.courierDescribe]
				this.dialogFormVisible = true
			},

			addCourier() {
				this.resMessage = '添加',
					this.title = '添加驿站',
					this.dialogFormVisible = true
			},
			cancle() {
				this.dialogFormVisible = false
				this.address = [];
				this.form = {
					courierStationAddress: "",
					courierStationCity: "",
					courierStationCommunityId: "",
					courierStationDistrict: "",
					courierStationImage: "",
					courierStationName: "",
					courierStationProvince: ""
				}
			},

			addOrUpdate() {
				if (this.title == '添加驿站') {
					this.$http.post('/courierStation/addCourierStation', this.form)
						.then(res => {
							if (res.status == 200) {
								this.$message({
									type: 'success',
									showClose: true,
									message: this.resMessage + '成功'
								})
								this.queryInfo()
								this.cancle()
							} else {
								this.$message({
									type: 'error',
									showClose: true,
									message: this.resMessage + '失败'
								})
							}
						})
						.catch(() => {
							this.$message({
								type: 'error',
								showClose: true,
								message: '服务器异常'
							})
						})
				} else {
					this.$http.post('/courierStation/modifyCourierStation', this.form)
						.then(res => {
							if (res.status == 200) {
								this.$message({
									type: 'success',
									showClose: true,
									message: this.resMessage + '成功'
								})
								this.queryInfo()
								this.cancle()
							} else {
								this.$message({
									type: 'error',
									showClose: true,
									message: this.resMessage + '失败'
								})
							}
						})
						.catch(() => {
							this.$message({
								type: 'error',
								showClose: true,
								message: '服务器异常'
							})
						})
				}
			},

			handleSizeChange(val) {
				this.formInline.pageSize = val
				this.formInline.pageNum = 1
				this.queryInfo()
			},
			handleCurrentChange(val) {
				this.formInline.pageNum = val
				this.queryInfo()
			},
			queryInfo() {
				this.$http.get('/courierStation/querySearchCourierStationList', {
						params: this.formInline
					})
					.then(res => {
						if (res.status == 200) {
							this.list = res.data.data.list
							this.total = res.data.data.total
						} else {
							this.$message({
								type: 'error',
								showClose: 'true',
								message: '服务器请求失败！'
							})
						}
					})

					.catch(() => {
						this.$message({
							type: 'error',
							showClose: 'true',
							message: '服务器异常！'
						})
					})
			},
			getCommunityList() {
				this.$http.get('/community/communityList', {
						params: {
							pageNum: 1,
							pageSize: 9999999,
						}
					})

					.then(res => {
						if (res.status == 200) {
							this.options = res.data.data.list
						} else {
							this.$message({
								type: 'error',
								showClose: 'true',
								message: '服务器请求失败！'
							})
						}
					})

					.catch(() => {
						this.$message({
							type: 'error',
							showClose: 'true',
							message: '服务器异常！'
						})
					})
			},
		},


		mounted() {
			this.queryInfo()
			this.getCommunityList()
		},


		watch: {
			date(newDate) {
				this.formInline.startTime = newDate[0]
				this.formInline.endTime = newDate[1]
			},

			address() {
				this.form.courierStationProvince = this.address[0]
				this.form.courierStationCity = this.address[1]
				this.form.courierStationDistrict = this.address[2]
			}
		}

	}
</script>

<style>
</style>